<template>
    <div class="wrap">
        <head-title :title="headText" @callback="onClickLeft"></head-title>
        <div class="wrapbd">
            <div class="tittab"><span class="active"><router-link to="/ltrade">构树链</router-link></span><span><router-link to="/mtrade">构树苗</router-link></span></div>
            <div class="trade_count">
                <div class="k" id="main"></div>
                <div class="k_data">
                    <div class="round">
                        <h3>构树链<br>{{coin.todayPrice}}</h3>
                        <!-- <span><i>+5.00</i><i>+8.13%</i></span> -->
                    </div>
                    <ul class="datanav">
                        <li><span>当前价格</span><span>{{coin.todayPrice}}</span></li>
                        <li><span>昨天价格</span><span>{{coin.yesterdayPrice}}</span></li>
                        <li><span>振幅</span><span>{{coin.upSacle | nubFixed}}%</span></li>
                        <li><span>市值</span><span>{{coin.issueTotal | nubFixed}}</span></li>
                        <li><span>成交</span><span>{{coin.turnoverTotal | nubFixed}}</span></li>
                    </ul>
                </div>
                <div class="tables">
                    <div><span>时间</span><span>买/卖</span><span>成交价</span><span>成交量</span></div>
                    <ul>
                        <li v-for="(item,index) in turnoverList" :key="index">
                            <span>{{item.over_time | hmDate}}</span><span :class="{'red':item.trade_type == 1,'green':item.trade_type == 2,}">{{item.trade_type | tradeType}}</span><span>{{item.unit_price | nubFixed}}</span><span>{{item.num | nubFixed}}</span>
                        </li>
                        <p v-if="turnoverList.length == 0">没有更多数据</p>
                    </ul>
                </div>
            </div>
        </div>
        <tabbar>
            <tabbar-item class="red" icon="cash-back-record" url="#/lbuyin?id=0">买入</tabbar-item>
            <tabbar-item class="green" icon="after-sale" url="#/lbuyin?id=1">卖出</tabbar-item>
            <tabbar-item class="blur" icon="exchange-record" url="#/lbuyin?id=2">挂单</tabbar-item>
        </tabbar>
    </div>
</template>
<script>
    import HeadTitle from "./../../components/title.vue";   
    import echarts from 'echarts'
    import { Tabbar, TabbarItem } from 'vant';
    export default {
        data(){
            return {
                headText: '交易大厅',  //顶部标题
                coin:{},  //数据
                turnoverList:[],
                chartTime:[],
                chartPrice:[],
            }
        },
        created(){
            this.initialize(1) //拉取信息
        },
		updated(){
            this.kData();
		},
        methods:{
			//返回
            onClickLeft () { this.$router.push('/index');},
            //获取数据信息
            initialize(b_id){
                let _this = this;
				this.Tools.AXIOS({
                    url: 'trade/index',
                    transformRequest:{
                        b_type: b_id,
                    },
                    success: function (res) {
                        let result = res.data.data;
                        _this.coin = result;
                        _this.turnoverList = result.turnoverList;
                        //循环遍历数组，将时间戳转换为 '月-日'
                        result.chartList.forEach((key) => {
                            let month,day, myDate = new Date(key.zero_time*1000),Mmonth = myDate.getMonth() + 1,Dday = myDate.getDate();
                            Mmonth.toString().length < 2 ? month = '0' + Mmonth:month = Mmonth; 
                            Dday.toString().length < 2 ? day = '0' + Dday:day = Dday; 
                            _this.chartPrice.push(key.price);
                            _this.chartTime.push(month + '-' + day);
                        });
                    }
                })
            },
            //获取K线图
            kData(){
                var myChart = echarts.init(document.getElementById('main'));     
                myChart.setOption({
                    title: {
                            text: '近期走势图',
                            subtext: ''
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross'
                            }
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis:  {
                            type: 'category',
                            boundaryGap: false,
                            data: this.chartTime.sort(),
                        },
                        yAxis: {
                            type: 'value',
                            // min: this.coin.chartMinPrice,   //Y轴最小值
                            // max: this.coin.chartMaxPrice,   //Y轴最大值
                            axisLabel: {
                                formatter: '{value}'
                            },
                            axisPointer: {
                                snap: true
                            }
                        },
                        visualMap: {
                            show: false,
                            dimension: 0,
                            pieces: [{
                                lte: 6,
                                color: 'green'
                            }, {
                                gt: 6,
                                lte: 8,
                                color: 'red'
                            }, {
                                gt: 8,
                                lte: 14,
                                color: 'green'
                            }, {
                                gt: 14,
                                lte: 17,
                                color: 'red'
                            }, {
                                gt: 17,
                                color: 'green'
                            }]
                        },
                        series: [
                            {
                                name:'价格',
                                type:'line',
                                smooth: true,
                                data: this.chartPrice.sort(),
                                markArea: {
                                    data: [ [{
                                        name: '早高峰',
                                        xAxis: '07:30'
                                    }, {
                                        xAxis: '10:00'
                                    }], [{
                                        name: '晚高峰',
                                        xAxis: '17:30'
                                    }, {
                                        xAxis: '21:15'
                                    }] ]
                                }
                            }
                        ]
                });
            },
        },
        components:{
            HeadTitle,
            Tabbar,TabbarItem,
        }
    }
</script>
<style scoped>
.tittab{ width: 100%; display: flex; justify-content: space-around; text-align: center; background: #fff; border-bottom: 1px solid #F3F3F3;}
.tittab span{ width: 50%; padding: .3rem 0; font-size: .4rem;}.tittab span a{ color: #666;}
.tittab span.active{ color: red; border-bottom: 2px solid red;} .tittab span.active a{ color:red;}
.trade_count{ width: 100%; background: #fff;}
.trade_count .k{ width: 100%; height: 6rem; margin: .3rem auto 0;}
.trade_count .k_data{ display: flex; justify-content: space-between; padding: 0 .3rem;margin: .5rem .5rem .3rem;}
.trade_count .k_data .round{ width: 2.5rem; height: 2.5rem;  border-radius: 100px; border: 3px solid #f00; position: relative;}
.trade_count .k_data .round h3{ text-align: center; display: block;  font-size: .4rem; margin-top: .8rem;}
.trade_count .k_data .round span{ width: 3rem; display: flex; justify-content: space-between; padding: .1rem .2rem; position: absolute; bottom: -.2rem; left: -.5rem; overflow: hidden; border-radius: 100px; background-color: rgba(0,0,0,.6);}
.trade_count .k_data .round span i{ font-style: normal; color: #fff; font-size: .32rem;}
.trade_count .k_data .datanav{ width: 50%;}
.trade_count .k_data .datanav li{ display: flex; line-height: .6rem; justify-content: space-between; font-size: .35rem; color: #333;}
.trade_count .tables{ width: 100%; overflow: hidden; border-top: 8px solid #F6F6F6; margin-bottom: 1.8rem;}
.trade_count .tables ul{ background: #fff;}
.trade_count .tables li span,.trade_count .tables div span{ width: 25%; float: left; text-align: center; font-size: .35rem; color: #000;}
.trade_count .tables li{ padding: .3rem 0; overflow: hidden; border-bottom: 1px solid #F6F6F6;}
.trade_count .tables div{ overflow: hidden; background: #fff; padding: .2rem 0; border-bottom: 1px solid #F6F6F6;}
.trade_count .tables p{ color: #ccc; padding: .3rem 0; text-align: center;}

</style>

